<template>
	<view class="load_more">
		<template v-if="hasMore">
			<view v-if="isLoadingMore" class="load_more">
				<!-- <IconFont name="loading" class="nut-icon-am-rotate nut-icon-am-infinite"></IconFont> -->
				<up-icon name="hourglass-half-fill" color="#2979ff" size="28"></up-icon>
				<text>{{ loadingText }}</text>
			</view>
			<view v-else>{{ moreText }}</view>
		</template>
		<view v-else>{{ noMoreText }}</view>
	</view>
</template>
<script setup lang="ts">
	defineProps({
		isLoadingMore: {
			type: Boolean,
			default: true,
			require: true,
		},
		hasMore: {
			type: Boolean,
			default: false,
		},
		moreText: {
			type: String,
			default: '上滑查看更多...',
		},
		loadingText: {
			type: String,
			default: '加载中...',
		},
		noMoreText: {
			type: String,
			default: '没有更多啦',
		},
	})
</script>
<style lang="scss">
	.load_more {
		width: 100%;
		text-align: center;
		color: #999999;
		line-height: 2.5;
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 14px;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
	}
</style>